import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/controllers/article_list_controller.dart';
import 'package:flutter_demo/controllers/home_controller.dart';
import 'package:flutter_demo/entities/article_item.dart';
import 'package:flutter_demo/pages/article_detail_page.dart';
import 'package:flutter_demo/utils/const.dart';
import 'package:flutter_demo/views/loading_container.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';

class ArticleListPage extends GetView<ArticleListController> {
  const ArticleListPage({Key? key}) : super(key: key);

  _handleToAbout(ArticleItem item) {
    Get.to(() => ArticleDetailPage(), arguments: item);
  }

  Widget _buildArticleItem(ArticleItem item, int index) {
    final isLeft = index % 2 == 0;
    return Card(
      elevation: 0.5,
      child: InkWell(
        onTap: () => _handleToAbout(item),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: 208 / 117,
              child: CachedNetworkImage(
                imageUrl: item.cover.toString(),
                httpHeaders: Const.imgHeaders,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: item.tags
                    .map(
                      (e) => Text(
                        e,
                        style: const TextStyle(fontSize: 12),
                        overflow: TextOverflow.clip,
                      ),
                    )
                    .toList(),
              ),
            ),
            Text(
              item.title.toString(),
              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
              maxLines: 2,
            )
          ],
        ).paddingOnly(left: isLeft ? 5 : 4, top: 5, right: isLeft ? 4 : 5, bottom: 5),
      ),
    );
  }

  @override
  StatelessElement createElement() {
    Get.put(ArticleListController());
    return super.createElement();
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => LoadingContainer(
        status: controller.listLoadingStatus.value,
        onReload: () => controller.getList(),
        child: EasyRefresh(
          header: PhoenixHeader(),
          onRefresh: () => controller.getList(),
          onLoad: () => controller.hasMore.value ? controller.getList(init: false) : null,
          child: GridView.builder(
              itemCount: controller.list.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 1.04),
              itemBuilder: (BuildContext context, int index) {
                return _buildArticleItem(controller.list[index], index);
              }),
        ),
      ),
    );
  }
}
